import React, { Component,PureComponent } from 'react';
import Person from './Person';
import update from 'react-addons-update';

export default class Dept2 extends PureComponent {

    constructor(props){
        super(props)
        this.state={
            name:"",
            age :"",
            persons:[]
        }
    }
    render() {
        const {name,age,persons} = this.state;
        const ss = persons.map((person,index)=>{
                    return(<Person key={index} detail={person}></Person>)
        });
        return (
            <div>
            <span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
            <span>年龄:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
            <input type="button" onClick={this._handleClick.bind(this)} value="确认"></input>
            <input type="button" onClick={this._go.bind(this)} value="go"></input>
                {ss}
            </div>
        )
    }
    _handleChange(event){
        this.setState({[event.target.name]:event.target.value})
    }
    _handleClick(){
        const {name,age} = this.state
        const pp = this.state.persons.concat([{name:name,age:age}]);
        this.setState({
            name:"",
            age :"",
            persons:pp
        })
    
    }
    _go(){
        var pp = this.state;

        //this.state.persons[0].name = "gggggg";
        
        this.state.persons[0] = update(this.state.persons[0],{name:{$set:"aaaaaa"}});
        console.log(this.state.persons);
    }
}
